<template>
    <div class="jianzhan-content">
        <Crumb name="Service Request"/>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Quest
            </el-button>
            <Search>

                <el-date-picker
                        v-model="key"
                        size="small"
                        class="input"
                        value-format="yyyy-MM-dd"
                        placeholder="Search By Request date"
                        prefix-icon="el-icon-search"/>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        placeholder="Search By PlateNum"
                        prefix-icon="el-icon-search"/>
                <el-button
                    type="primary"
                    size="small"
                    @click="_search"
                >Search</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                    :data="questList.slice((pageNum-1) * pageSize,pageNum * pageSize)"
                    border
                    row-key="id"
                    stripe
                    style="width: 100%"
                >
                    <el-table-column type="expand" label="problem" width="80">
                        <template slot-scope="quest">
                            <div v-for="item in quest.row.problemVoList" :key="item.id">
                                <span>{{item.problemDescription}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="requestName"
                            label="Request Number"
                    />
                    <el-table-column
                            prop="requestDate"
                            label="Request Date"
                    />
                    <el-table-column
                            prop="requestBy"
                            label="Request By"
                    />
                    <el-table-column
                            prop="plateNum"
                            label="Plate Num"
                    />
                    <el-table-column
                            prop="serviceType"
                            label="Service Type"
                    />
                    <el-table-column>
                        <template slot-scope="request">
                            <el-button size="small" @click="showDetail(request.row.id)">Details</el-button>
                            <el-button size="small" @click="deleteQuest(request.row.id)" type="danger">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"> </el-pagination>
                </div>
            </div>
        </div>
        <quest-dialog :visible="showDialog" :id="id" @close="showDialog = false" @addSuccess="addSuccess"/>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import questDialog from '@/components/service/questDialog'
    import {getQuestList,deleteQuest} from "../../api/service";
    import {mapGetters} from 'vuex'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    export default {
        name: "quest",
        mixins:[mixins],
        data(){
            return {
                list:[],
                quest:{},
                key:'',
                key1:'',
                showDialog:false,
                id:0
            }
        },
        created(){
            this._getQuest();
        },
        computed:{
            ...mapGetters(['pageSize']),
            questList(){
                return this.list.filter(item=>item.requestDate.indexOf(this.key?this.key:'')>-1).filter(item=>item.plateNum.toLowerCase().indexOf(this.key1.toLowerCase())>-1)
            }
        },
        methods:{
            addSuccess(){
                this.showDialog = false;
                this.id = 0;
                this._getQuest();
            },
            openAdd(){
                this.id = 0;
                this.showDialog = true
            },
            deleteQuest(id){
                this.$confirm('Do you want to delete this data ?','Warning', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: "No",
                    type: 'warning',
                    center: true}).then(async () => {
                        const {status} = await deleteQuest(id);
                        if(status === ERROR_OK ){
                            this._getQuest()
                        }
                }).catch(()=>{})
            },
            async _getQuest(){
                const {status,data} = await getQuestList();
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.total
                }
            },
            async _search(){

            },
            showDetail(id){
                this.id = id;
                this.showDialog = true
            },
            changePage(page){
               this.pageNum = page
            }
        },
        watch:{
            questList(list){
                this.total = list.length
            }
        },
        components:{
            Crumb,Search,questDialog
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>